<template>
  <div
    id="global"
    class="layout-limit"
    style="width: 1272px; height: 2171px; "
  >
    <div
      class="header-container"
      style="width: 1272px; height: 72px; position: relative"
    >
      <img
        src="../../images/header-logo.png"
        alt="小红书图标"
        class="header-logo"
      />
      <div class="input-box">
        <input
          class="input"
          v-model="searchKeyword"
          @input="search"
          placeholder="搜索小红书"
        />
        <div class="input-button"></div>
        <div class="right">
          <div class="module-container">
            <button
              @mouseover="showOptions('options1')"
              @mouseleave="hideOptions('options1')"
            >
              合作中心
            </button>
            <div
              ref="options1"
              class="options"
              @mouseover="showOptions('options1')"
              @mouseleave="hideOptions('options1')"
            >
              <a href="#" @click="handleClick('创作服务')">创作服务</a>
              <a href="#" @click="handleClick('直播管理')">直播管理</a>
              <a href="#" @click="handleClick('电脑直播助手')">电脑直播助手</a>
            </div>
          </div>
          <div class="module-container">
            <button
              @mouseover="showOptions('options2')"
              @mouseleave="hideOptions('options2')"
            >
              业务合作
            </button>
            <div
              ref="options2"
              class="options"
              @mouseover="showOptions('options2')"
              @mouseleave="hideOptions('options2')"
            >
              <a href="#" @click="handleClick('专业号')">专业号</a>
              <a href="#" @click="handleClick('推广合作')">推广合作</a>
              <a href="#" @click="handleClick('蒲公英')">蒲公英</a>
              <a href="#" @click="handleClick('商家入驻')">商家入驻</a>
              <a href="#" @click="handleClick('MCN入驻')">MCN入驻</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="side-bar">
        <div class="channel-list">
          <Side />
        </div>
      </div>
      <div class="main-content"  style="margin: 72px 250px;">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { textSpanIntersectsWith } from 'typescript';
import { ref } from "vue";
import Side from "./side-bar.vue";

import Login from "../Login.vue";



const options1 = ref<HTMLElement | null>(null);
const options2 = ref<HTMLElement | null>(null); //初始值是null,引用的对象可以是HTMLElement类型或null类型的对象
let hideTimeout: number | undefined; //用于确保变量在使用之前已被定义为number类型，避免类型错误

const showOptions = (optionsRef: string) => {
  const element = optionsRef === "options1" ? options1.value : options2.value;
  if (element) {
    element.style.display = "block";
    if (hideTimeout) {
      clearTimeout(hideTimeout);
    }
  }
};

const hideOptions = (optionsRef: string) => {
  hideTimeout = window.setTimeout(() => {
    const element = optionsRef === "options1" ? options1.value : options2.value;
    if (element) {
      element.style.display = "none";
    }
  }, 50); // 延迟时间，单位为毫秒
};

const handleClick = (option: string) => {
  console.log(`选中选项: ${option}`);
};
const searchKeyword = ref("");
const search = () => {};
</script>


<style>
@import "../../css/index.css";
@import "../../images/icon.fabu/iconfont.css";
@import "../../images/icon.faxian/iconfont.css";
@import "../../images/icon.tongzhi/iconfont.css";
@import "../../images/icon.wode/iconfont.css";
@import "../../images/icon.more/iconfont.css";
@import "../../images/icon.dianzanaixin/iconfont.css";
@import "../../images/icon.aixin/iconfont.css";
@import "../../images/icon.aixin/iconfont.css";
@import "../../images/icon.shoucang/iconfont.css";
@import "../../images/icon.pinglun/iconfont.css";
@import "../../images/icon.31zhuanfa/iconfont.css";

.right{
  width: 210px;
  height: 50px;
}
.module-container button{
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 10px;
  background-color: #fff;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}
.module-container button:hover{
  background-color: #cfcdcd;
}


</style>